<template>
  <div id="box" >
      <div class="lists">
          <div class="sort">排名</div>
          <div class="kfs">开发商</div>
          <div class="jh">应交付/已交付</div>
          <div class="syhk">
            <div>
              剩余交付
            </div>
            <div class="triangle ">
                <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="sort(1,1)" >
                <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="sort(1,2)">
            </div>
          </div>
          <div class="hkjd">
            <div>
              交付进度
            </div>
            <div class="triangle ">
                <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="sort(2,1)" >
                <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="sort(2,2)">
            </div>
          </div>
      </div>
      <div class="lists" v-for="(item,index) in dataList">
          <div class="sort">{{ ++index }}</div>
          <div class="kfs finger" @click="go(item.groupName,item.borrowXmId)">
            <el-tooltip class="item" effect="dark" :content="param.level == 1 ? item.groupName :item.projectName" placement="top">
            {{ param.level == 1 ? item.groupName :item.projectName }}
            </el-tooltip>
          </div>
          <div class="jh">
            <div class="propress">
                <el-tooltip
                      class="item"
                      effect="dark"
                      :content="'应交付'+item.shallDeliver+'套'"
                      placement="top"
                      >
                      <div class="jk" :style="{ width: item.jkjd + '%' }">
                      </div>
               </el-tooltip>
               <el-tooltip
                      class="item"
                      effect="dark"
                      :content="'已交付'+item.alreadyDeliver+'套'"
                      placement="top"
                      >
                      <div class="hk" :style="{width:item.deliverRatio + '%'}">
                      </div>
               </el-tooltip>
              </div>
          </div>
          <div class="syhk">{{item.residueDeliver }}</div>
          <div class="hkjd">{{ item.deliverRatio }}%</div>
      </div>
 </div>
</template>

<script setup >
import { onMounted, onUnmounted, reactive, getCurrentInstance,defineProps,watch,ref,defineEmits } from "vue"

const props = defineProps({
  useSelectDeliverRankingData:Object,
  param:Object
})
const dataList = ref(null)
watch(() => props.useSelectDeliverRankingData, (val) => {
val.forEach(item => {
  item.jkjd = (100 - item.deliverRatio)
});
dataList.value = val
});
let { proxy } = getCurrentInstance();
var option


// 排序
const emit = defineEmits(['dateSortStr-Father1']);

function sort (a,b){
    let str = {}
      str.sortField = a
      str.sortWay = b
      emit('dateSortStr-Father1',str)
}
// 跳转详情
const go = (groupName,borrowXmId) => {
    if(props.param.level == 1){
        proxy.$goDetail(groupName);
    }else{
        proxy.$goProDetail(borrowXmId);
    }
}
onMounted (() => {
option && myChart.setOption(option);
})
</script>

<style lang="less" scoped>
.propress{
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
}
.propress > div{
  display: flex;
  align-items: center;
  padding-left: 5px;
  color: #fff;
  font-size: 14px;
}
.jk{
  height: 15px;  
   background: linear-gradient(to right, rgba(139, 88, 229, 1),rgba(181, 146, 243, 1));
   position: relative;
}
#box{
height: 100%;
width: 100%;
}
.lists{
display: flex;
width: 100%;
font-size: 16px;
align-items: center;
.sort{
 width: 10%;
 text-align: center;
 display: flex;
 justify-content: center;
 align-items: center;
}
.kfs {
    width: 15%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.jh{
  width: 38%;
}
.triangle{
  position: relative;
  top: 3px;
  left: 2px
}
.syhk{
  width: 20%;
  text-align: center;
  display: flex;
  justify-content: center;

}
.syhk > div{
  position: relative;
 
}

.hkjd{
  width: 18%;
  text-align: center;
  display: flex;

}
}
.lists:not(:first-child){
 padding: 7px 0px;
}
.lists:not(:first-child) > .kfs{
height: 20px;
}
.zx{
    width: 8px;
    height: 15px;  
    position: relative;
    top: 3px;
    left: 3px;
    img{
      width: 100%;
      height: 100%
    }
  }
  .hk{
  height: 15px;
  background: linear-gradient(to right, rgba(255, 113, 57, 1), rgba(255, 153, 79, 1));
  }
  .finger{
    cursor:pointer;
  }
</style>
